Hmm, I realized this is tougher than I thought. Making ref.value type to be the base type of generics wouldn't solve the issue completely as it mismatches if we want to assign it to another generics typed value.

function useState<State extends string>(initial: State) {
  const state = ref(initial) // state.value -> string
  const set = (v: State) => void (state.value = v) // pass
  const another: State = state.value // error
  return {}
}

Ideally state.value should also be State to allow both usage of input and output of the value. But I'm still not sure how we can infer the original generics type to ref value. 🤔

Rethinking about another option, We might want to just leave this type since assigning generics type into potentially unwrapped type is dangerous. If the users are very sure the generics type and unwrapped type are identical, they can just cast it.

function useState<State extends string>(initial: State) {
  const state = ref(initial) 
  const set = (v: State) => {
    state.value = v as UnwrapRef<State>
  }
  return {}
}

What do you think?

I would like to avoid exposing UnwrapRef<> to the user.

If you cast the value to State it works

function useState<State extends string>(initial: State) {
  const state = ref(initial) // state.value -> string
  const set = (v: State) => void (state.value = v) // pass
  const another = state.value as State // pass
  return {}
}

Ideally state.value should also be State to allow both usage of input and output of the value. But I'm still not sure how we can infer the original generics type to ref value. 🤔

For me ideally UnwrapRef<T> would be basically the same as T, but that is not possible. We might be able to do it, using different types for set and get (which is not supported currently on typescript, nor is planed AFAIK)

If the users are very sure the generics type and unwrapped type are identical

Thought about that and the cleanest way to do it would be other overload

export function ref<T, noRef extends  true>(value: T): Ref<T>

// 

function useState<State extends string>(initial: State) {
  const state = ref<State, true>(initial) // state.value -> State extends string
  const set = (v: State) => void (state.value = v) // pass
  const another: State = state.value // pass
  return {}
}

This way we can ignore the unwrap ref

What are your thoughts?

I think having noRef type parameter is as same as cast. I would say we don't have to introduce dedicated api for that. We can just do below if we don't want to encourage users to use UnwrapRef:

function useState<State extends string>(initial: State) {
  const state = ref(initial) as Ref<State> // state.value -> State extends string
  const set = (v: State) => void (state.value = v) // pass
  const another: State = state.value // pass
  return {}
}

We need to add that to the docs I can see some people having problems

so how did it end? I'm having this problem...